<template>
    <div class="app-container">
        <div class="customContainer ">
            <!-- 搜索头 -->
            <el-form :inline="true" :model="formInline" class="demo-form-inline" size="small">
                <el-form-item>
                    <el-date-picker v-model="pickerDate" value-format="yyyy.MM.dd" type="daterange" align="right"
                        unlink-panels range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"
                        :picker-options="pickerOptions"></el-date-picker>
                </el-form-item>
                <el-form-item>
                    <el-input v-model="formInline.name" placeholder="请输入合同名称"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-input v-model="formInline.mobile" placeholder="请输入手机号" class="w160"></el-input>
                </el-form-item>
                <el-form-item>
                    <dj-button size="small" @search="searchClick" />
                </el-form-item>
            </el-form>
            <!-- 表格 -->
            <el-table  highlight-current-row :data="list" v-loading.body="listLoading" border size="mini">
                <el-table-column align="center" label='签署时间' prop="create_time"></el-table-column>
                <el-table-column align="center" label="合同名称" prop="update_time">
                    <template slot-scope="scope">
                        <el-button type="text" @click="showUploadDialog(scope.row,scope.$index)">{{scope.row.name}}</el-button>
                    </template>
                </el-table-column>
                <el-table-column align="center" label="合同编号" prop="id"></el-table-column>
                <el-table-column align="center" label='会员姓名' prop="user_name"></el-table-column>
                <el-table-column align="center" label="会员手机号" prop="mobile"></el-table-column>
                <el-table-column align="center" label='操作'>
                    <template slot-scope="scope">
                        <a :href="scope.row.src" target="view_window">
                            <el-button type="text">查看签名</el-button>
                        </a>
                    </template>
                </el-table-column>
            </el-table>
            <!-- 合同弹框 -->
            <el-dialog :close-on-click-modal="false" width="80%" title="上传合同" :visible.sync="uploadDialog"
                append-to-body>
                <el-form :model="saveForm" class="demo-form-inline">
                    <el-form-item label="合同名称" prop="name">
                        <el-input placeholder="请输入合同名称" v-model="saveForm.name" :maxlength="20" disabled></el-input>
                    </el-form-item>
                    <el-form-item label="合同内容" prop="container">
                        <el-input type="textarea" :rows="15" placeholder="请输入合同内容" v-model="saveForm.container"
                            disabled></el-input>
                    </el-form-item>
                </el-form>
            </el-dialog>
        </div>
        <!-- 自定义底部 -->
        <div class="bottom_box">
            <el-pagination class="pull-left" background @current-change="handleCurrentChange" :current-page.sync="currentPage"
                :page-size="20" layout="prev, pager, next, jumper" :total="totalDataNumber">
            </el-pagination>
        </div>
    </div>
</template>
<script>
    import {
        getList,
        getPage,
        getContract
    } from "@/api/member/contract_info";
    import { pickerOptionsF, pickerDateF, optionMaxTime } from '@/utils';
    export default {
        data() {
            return {
                list: null,
                listLoading: false,
                uploadDialog: false,
                currentPage: 1,
                totalDataNumber: 0,
                store_list: [],
                formInline: {
                    begin_time: '',
                    end_time: '',
                    name: '',
                    mobile: '',
                },
                saveForm: {
                    name: '',
                    container: ''
                },
                pickerOptions: pickerOptionsF(),
                pickerDate: pickerDateF()
            }
        },
        created() {
            this.searchClick();
        },
        methods: {
            showUploadDialog(row, index) {
                this.uploadDialog = true;
                if (row) {
                    getContract({ id: row.template_id }).then(response => {
                        this.saveForm = response
                        this.saveForm.name = row.name
                    });
                }
            },
            // 搜索
            searchClick() {
                optionMaxTime(this.pickerDate).then(() => {//最大可选择时间区间
                    this.formInline.begin_time = this.pickerDate ? this.pickerDate[0] : '';
                    this.formInline.end_time = this.pickerDate ? this.pickerDate[1] : '';
                    this.fetchData();
                });
            },
            // 列表获取
            fetchData() {
                this.listLoading = true;
                this.currentPage = 1;
                getPage(this.formInline).then(response => {
                    this.totalDataNumber = response.page * 20;
                    this.cost_totle = response.cost_totle
                    this.num = response.num
                    getList(this.formInline).then(response => {
                        this.list = response;
                        this.listLoading = false;
                    })
                }).catch(res=>{
                    this.listLoading=false;
                })
            },
            handleCurrentChange(val) {
                this.listLoading = true;
                getList(this.formInline, val).then(response => {
                    this.list = response;
                    this.listLoading = false;
                });
            },
        }
    }
</script>